<!DOCTYPE html>
<html>
<head>
    <title>
        <% if(typeof solutionName != 'undefined'){ %>
        <%=solutionName %><% } %>
        <% if(typeof taskName != 'undefined') { %>
        <%=taskName %>
        <% } %>
    </title>
    <%- include ../headInclude.ejs %>

    <!--<link href="/css/bootstrap.css" rel="stylesheet">-->
    <link href="/js/jquery-ui-1.12.1.custom/jquery-ui.min.css" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="/js/bootstrap-fileinput/css/fileinput.min.css"/>
    <link rel="stylesheet" type="text/css" href="/js/webix/webix.css" />
    <link rel="stylesheet" type="text/css" href="/css/integration/newAggre.css"/>
    <link rel="stylesheet" type="text/css" href="/css/integrateStyle.css"/>

    <style>
        #div-AggreMS{
            height:100%;
            margin:0 0;
            padding:0 !important;
        }
        .main-content{
            margin-bottom: 0 !important;
            height:100%;
            background: #FFF !important;
        }
        section{
            overflow: hidden;
        }
    </style>

</head>
<body class="left-side-collapsed">
<section>
    <%- include ../header.ejs %>
    <div id="aggreDIV" class="main-content" style="">

        <div class="wrapper" style="height: 100%;">
            <div class="col-lg-12 col-md-12 col-sm-12" id="canvas-div">
                <%- include ./diagram-modeling.ejs %>
            </div>

            <!--region save modal-->
            <div aria-hidden="true" tabIndex="-1" id='save-aggre-task-modal' class="modal fade">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" id="close-modal" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title">
                                Save this integration task
                            </h4>
                        </div>
                        <div class="modal-body">
                            <form id="save-aggre-form" class="form-horizontal" role="form">
                                <div class="form-group">
                                    <label for="taskName" class="col-sm-2 control-label">Task Name</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" id="taskName"
                                               placeholder="task name" name="taskName" required>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="desc" class="col-sm-2 control-label">Description</label>
                                    <div class="col-sm-10">
                                    <textarea type="text" class="form-control" id="taskDesc"
                                              placeholder="input the description of the task" roles="3" name="taskDesc" required></textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="author" class="col-sm-2 control-label">Author</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" id="taskAuthor"
                                               placeholder="please input your name" name="taskAuthor" required>
                                    </div>
                                </div>
                                <div id="loading-div" style="display: none;text-align: center;">
                                    <i class="fa fa-spinner fa-spin fa-3x fa-fw" aria-hidden="true" style="margin: 2px auto;"></i>
                                </div>
                                <hr>
                                <div class="form-group" style="">
                                    <div class="col-sm-offset-2 col-sm-4">
                                        <button type="submit" class="btn btn-primary" id="submit-form-btn">Save</button>
                                    </div>
                                    <div class="col-sm-offset-2 col-sm-4">
                                        <button type="button" class="btn btn-default" id="cancle-form-btn" data-dismiss="modal">Cancle</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!--<div class="modal-footer">-->
                        <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
                        <!--<button type="button" class="btn-tt-submit btn btn-primary" id="save-aggre-btn">Save</button>-->
                        <!--</div>-->
                    </div>
                </div>
            </div>
            <!--endregion-->
        </div>

    </div>
</section>
<script type="text/javascript" src="/js/jquery-ui-1.12.1.custom/external/jquery/jquery.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<%- include ../footerInclude.ejs %>

<script type="text/javascript" src="/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="/js/webix/webix.js"></script>
<script type="text/javascript" src="/js/jtopo/js/jtopo-0.4.8.js"></script>
<script type="text/javascript" src="/js/bootstrap-fileinput/js/fileinput.js"></script>
<script type="text/javascript" src="/js/bootstrap-fileinput/js/locales/zh.js"></script>

<script type="text/javascript" src="/js/browserBundle.js"></script>

<script src="http://localhost:2345/livereload.js"></script>
</body>
</html>